<template id="card">
  <div class="card">
    <div class="card-header" :class="headerClass">
      <h3 class="card-title">{{title}}</h3>
    </div>
    <div class="card-body" :class="bodyClass">
      <slot></slot>
    </div>
    <div class="card-footer" :class="footerClass">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "Card",
  props: {
    title: {
      default: ""
    },
    headerClass: {
      default: ""
    },
    bodyClass: {
      default: ""
    },
    footerClass: {
      default: ""
    }
  }
};
</script>